<!--
 * @Date: 2024-01-12 17:19:44
 * @LastEditors: Truman
 * @LastEditTime: 2024-02-23 15:06:12
 * @FilePath: \newbee-mall-vue3-app\src\views\pwd.vue
-->
<template>
  <div class="seting-box">
    <s-header :name="'忘记密码'"></s-header>
    <van-form @submit="onSubmit">
      <div class="input-item">
        <van-field v-model="state.form.username" label="用户名" />
        <van-field v-model="state.form.tel" label="手机号" />
        <van-field
          v-model="state.form.password"
          type="password"
          label="新密码"
        />
        <van-field
          v-model="state.form.confirm_password"
          type="password"
          label="确认密码"
        />
      </div>
      <van-button
        round
        class="save-btn"
        color="#1baeae"
        type="primary"
        native-type="submit"
        block
        >提交</van-button
      >
    </van-form>
  </div>
</template>

<script setup>
import { reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import sHeader from "@/components/SimpleHeader.vue";
import { forgotPwd } from "@/service/user";
import { setLocal } from "@/common/js/utils";
import { showSuccessToast, showToast } from "vant";
const router = useRouter();
const state = reactive({
  form: {
    username: "",
    tel: "",
    password: "",
    confirm_password: "",
  },
});

onMounted(async () => {});

const onSubmit = async () => {
  const finalCheckPwd =
    /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,16}$/;

  // 两次密码必须相同
  if (state.form.password !== state.form.confirm_password) {
    showToast({
      message: "两遍密码必须相同",
      className: "particulars-detail-popup",
    });
    return;
  }

  const checkPwd = finalCheckPwd.test(state.form.password);

  if (!checkPwd) {
    showToast({
      message:
        "密码必须包含大小写字母、数字、特殊字符中至少3种  并且位数不小于8",
      className: "particulars-detail-popup",
    });
    return;
  }
  await forgotPwd(state.form)
    .then((res) => {
      showToast({
        message: res.message ? res.message : "修改成功",
        className: "particulars-detail-popup",
      });
    })
    .catch((err) => {
      let e = "";
      for (const key in err.response.data.message) {
        if (Object.hasOwnProperty.call(err.response.data.message, key)) {
          const el = err.response.data.message[key];

          e += el;
        }
      }
      showToast({
        message: e,
        className: "particulars-detail-popup",
      });
    });
};
</script>

<style lang="less" scoped>
.seting-box {
  .save-btn {
    width: 80%;
    margin: 20px auto;
  }
}
</style>
